<script setup lang="ts">
import { onMounted, reactive, nextTick, ref } from 'vue';
import useInstance from '@/hooks/useInstance';
const { global } = useInstance();

const myChart = ref<HTMLElement>();

//雷达图
const charts1 = () => {
  const echartInstance = global.$echarts.init(myChart.value);
  let option = reactive({
    // title: {
    //   text: 'Basic Radar Chart',
    // },

    legend: {
      data: ['学习', '进度'],
      // top: '-5%',
    },
    radar: {
      // shape: 'circle',
      axisName: {
        formatter: '【{value}】',
        color: '#067cf8',
      },
      indicator: [
        { name: '次数', max: 650 },
        { name: '效率', max: 1600 },
        { name: '代码质量', max: 3000 },
        { name: '进度', max: 3800 },
        { name: '活跃度', max: 5200 },
        { name: '松懈度', max: 2500 },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',

        data: [
          {
            value: [420, 300, 2000, 3500, 5000, 1800],
            name: '学习',
          },
          {
            value: [500, 1400, 2800, 2600, 4200, 2100],
            name: '进度',
          },
        ],
      },
    ],
  });
  echartInstance.setOption(option);
};
onMounted(() => {
  charts1();
});
</script>

<template>
  <div ref="myChart" :style="{ width: '500px', height: '400px' }"></div>
</template>

<style scoped lang="scss"></style>
